<html>
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <title>
   ECharts案例教程（下）  | 数螺 | NAUT IDEA
  </title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <style type="text/css">
   #xmain img {
                  max-width: 100%;
                  display: block;
                  margin-top: 10px;
                  margin-bottom: 10px;
                }

                #xmain p {
                    line-height:150%;
                    font-size: 16px;
                    margin-top: 20px;
                }

                #xmain h2 {
                    font-size: 24px;
                }

                #xmain h3 {
                    font-size: 20px;
                }

                #xmain h4 {
                    font-size: 18px;
                }


                .header {
	           background-color: #0099ff;
	           color: #ffffff;
	           margin-bottom: 20px;
	        }

	        .header p {
                  margin: 0px;
                  padding: 10px 0;
                  display: inline-block;  
                  vertical-align: middle;
                  font-size: 16px;
               }

               .header a {
                 color: white;
               }

              .header img {
                 height: 25px;
              }
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js">
  </script>
  <script src="http://nautstatic-10007657.file.myqcloud.com/static/css/readability.min.js" type="text/javascript">
  </script>
  <script type="text/javascript">
   $(document).ready(function() {
                 var loc = document.location;
                 var uri = {
                  spec: "http://dataunion.org/8952.html",
                  host: "http://dataunion.org",
                  prePath: "http://dataunion.org",
                  scheme: "http",
                  pathBase: "http://dataunion.org/"
                 };
    
                 var documentClone = document.cloneNode(true);
                 var article = new Readability(uri, documentClone).parse();
     
                 document.getElementById("xmain").innerHTML = article.content;
                });
  </script>
  <!-- 1466454914: Accept with keywords: (title(0.0):案例,教程,数盟,社区, topn(0.2):数盟,图表,时间,文件,年份,颜色,自定义,标签,参数,时间轴,文章,可视化,默认值,绘制,教程,模块化,间隔,销量,标题,数据表,坐标轴,折线图,方式,案例,样式,数据,代码,最小值,列表,图例).-->
 </head>
 <body onload="">
  <div class="header">
   <div class="container">
    <div class="row">
     <div class="col-xs-6 col-sm-6 text-left">
      <a href="/databee">
       <img src="http://nautidea-10007657.cos.myqcloud.com/logo_white.png"/>
      </a>
      <a href="/databee">
       <p>
        数螺
       </p>
      </a>
     </div>
     <div class="hidden-xs col-sm-6 text-right">
      <p>
       致力于数据科学的推广和知识传播
      </p>
     </div>
    </div>
   </div>
  </div>
  <div class="container text-center">
   <h1>
    ECharts案例教程（下）
   </h1>
  </div>
  <div class="container" id="xmain">
   ﻿﻿
   <title>
    ECharts案例教程（下） | 数盟社区
   </title>
   <!-- All in One SEO Pack 2.2.7.6.2 by Michael Torbert of Semper Fi Web Design[32,61] -->
   <!-- /all in one seo pack -->
   <!--
<div align="center">
<a href="http://strata.oreilly.com.cn/hadoop-big-data-cn?cmp=mp-data-confreg-home-stcn16_dataunion_pc" target="_blank"><img src="http://dataunion.org/wp-content/uploads/2016/05/stratabj.jpg"/ ></a>
</div>
-->
   <header id="header-web">
    <div class="header-main">
     <hgroup class="logo">
      <h1>
       <a href="http://dataunion.org/" rel="home" title="数盟社区">
        <img src="http://dataunion.org/wp-content/themes/yzipi/images/logo.png"/>
       </a>
      </h1>
     </hgroup>
     <!--logo-->
     <nav class="header-nav">
      <ul class="menu" id="menu-%e4%b8%bb%e8%8f%9c%e5%8d%95">
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-71" id="menu-item-71">
        <a href="http://dataunion.org/category/events" title="events">
         活动
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22457" id="menu-item-22457">
          <a href="http://dataunion.org/2016timeline">
           2016档期
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22459" id="menu-item-22459">
          <a href="http://dataunion.org/category/parterc">
           合作会议
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-has-children menu-item-20869" id="menu-item-20869">
        <a href="http://dataunion.org/category/tech" title="articles">
         文章
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20867" id="menu-item-20867">
          <a href="http://dataunion.org/category/tech/base" title="base">
           基础架构
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3302" id="menu-item-3302">
          <a href="http://dataunion.org/category/tech/ai" title="ai">
           人工智能
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3303" id="menu-item-3303">
          <a href="http://dataunion.org/category/tech/analysis" title="analysis">
           数据分析
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21920" id="menu-item-21920">
          <a href="http://dataunion.org/category/tech/dm">
           数据挖掘
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-3314" id="menu-item-3314">
          <a href="http://dataunion.org/category/tech/viz" title="viz">
           可视化
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3305" id="menu-item-3305">
          <a href="http://dataunion.org/category/tech/devl" title="devl">
           编程语言
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-20876" id="menu-item-20876">
        <a href="http://dataunion.org/category/industry">
         行业
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16328" id="menu-item-16328">
          <a href="http://dataunion.org/category/industry/case" title="case">
           行业应用
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2112" id="menu-item-2112">
          <a href="http://dataunion.org/category/industry/demo" title="demo">
           Demo展示
          </a>
         </li>
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21562" id="menu-item-21562">
          <a href="http://dataunion.org/category/industry/news">
           行业资讯
          </a>
         </li>
        </ul>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-311" id="menu-item-311">
        <a href="http://dataunion.org/category/sources" title="sources">
         资源
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20870" id="menu-item-20870">
        <a href="http://dataunion.org/category/books" title="book">
         图书
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21363" id="menu-item-21363">
        <a href="http://dataunion.org/category/training">
         课程
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-21853" id="menu-item-21853">
        <a href="http://dataunion.org/category/jobs">
         职位
        </a>
        <ul class="sub-menu">
         <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-22050" id="menu-item-22050">
          <a href="http://dataunion.org/category/career">
           职业规划
          </a>
         </li>
        </ul>
       </li>
      </ul>
     </nav>
     <!--header-nav-->
    </div>
   </header>
   <!--header-web-->
   <div id="main">
    <div id="soutab">
     <form action="http://dataunion.org/" class="search" method="get">
     </form>
    </div>
    <div id="container">
     <nav id="mbx">
      当前位置：
      <a href="http://dataunion.org">
       首页
      </a>
      &gt;
      <a href="http://dataunion.org/category/tech">
       文章
      </a>
      &gt;
      <a href="http://dataunion.org/category/tech/viz">
       可视化
      </a>
      &gt;  正文
     </nav>
     <!--mbx-->
     <article class="content">
      <header align="centre" class="contenttitle">
       <div class="mscc">
        <h1 class="mscctitle">
         <a href="http://dataunion.org/8952.html">
          ECharts案例教程（下）
         </a>
        </h1>
        <address class="msccaddress ">
         <em>
          28,493 次阅读 -
         </em>
         <a href="http://dataunion.org/category/tech/viz" rel="category tag">
          可视化
         </a>
        </address>
       </div>
      </header>
      <div class="content-text">
       <p>
        作者：王海庆
       </p>
       <p>
        ECharts案例教程系列文章，试图通过案例从入门到精通的方式学习数据可视化工具ECharts，
        <a href="http://blog.csdn.net/whqet/article/details/42703973" target="_blank">
         第1篇
        </a>
        我们通过简单的条形图、条形图和折线图的混搭两个案例描述ECharts的使用流程，数据配置框架等。本博文为第2篇，研究时间轴在数据图中的应用。
       </p>
       <blockquote>
        <p>
         系列文章：
         <a href="http://dataunion.org/?p=8944">
          ECharts案例教程（上）
         </a>
        </p>
       </blockquote>
       <p>
        <a href="http://dataunion.org/wp-content/uploads/2015/01/00.jpg">
         <img src="http://dataunion.org/wp-content/uploads/2015/01/00.jpg"/>
        </a>
       </p>
       <blockquote>
        <p>
         —
         <a href="http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content" target="_blank">
          我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源
         </a>
         ，
         <a href="http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content" target="_blank">
          走起！
         </a>
        </p>
       </blockquote>
       <h2>
        <p name="t0">
        </p>
        简介
       </h2>
       <p>
        <a href="http://echarts.baidu.com/index.html" target="_blank">
         ECharts
        </a>
        （Enterprise Charts，商业级数据图表）是百度的一个开源的数据可视化工具，底层基于
        <a href="http://ecomfe.github.io/zrender/" target="_blank">
         ZRender
        </a>
        (一个全新的轻量级canvas类库)，可以比较方便的折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现等。ECharts的开发团队有个Slider介绍为什么使用Echarts，感兴趣的童鞋可以移步欣赏（
        <a href="http://echarts.baidu.com/doc/slide/whyEcharts.html#/" target="_blank">
         Why ECharts
        </a>
        ）。
       </p>
       <h2>
        <p name="t1">
        </p>
        案例欣赏
       </h2>
       <p>
        本案例为具有时间轴的折线系列图，适合用于对比展示数据，比如某超市年度销量变化图，某产品的前期投入资金图等。
       </p>
       <p>
        <a href="http://dataunion.org/wp-content/uploads/2015/01/55.jpg">
         <img src="http://dataunion.org/wp-content/uploads/2015/01/55.jpg"/>
        </a>
       </p>
       <p>
        大家也可以在线预览、编辑效果，请移步到codepen。
       </p>
       <div>
        ————————————————————————————————————————————
       </div>
       <div>
        == 带时间轴折线图==
        <a href="http://codepen.io/whqet/full/zxZEje/" target="_blank">
         全屏预览
        </a>
        ==
        <a href="http://codepen.io/whqet/pen/zxZEje" target="_blank">
         在线编辑
        </a>
        ==
        <a href="http://codepen.io/whqet/share/zip/zxZEje/" target="_blank">
         下载收藏
        </a>
        ==
       </div>
       <div>
        ————————————————————————————————————————————
       </div>
       <h2>
        <p name="t2">
        </p>
        知识储备
       </h2>
       <p>
        <strong>
         1.标签式单文件引入Echarts。
        </strong>
       </p>
       <p>
        官方推荐三种使用引入ECharts的方式，模块化包引入、模块化单文件引入和标签式单文件引入。首篇博客采用了模块化单文件引入的方式，这种方式可以按需加载文件，是官方推荐的方式。本文我们将使用标签式单文件引入的方式，如果你的项目没有基于模块化开发，同时也不基于AMD规范，那么使用标签式单文件方式将会非常方便，我们只需要使用script标签引入一个ECharts库即可，可引入的单文件包括：dist/echarts-all.js和source/echarts-all.js。前者经过压缩，包括全图表，包含world，china以及34个省市级地图数据；后者未压缩，包括全图表，包含world，china以及34个省市级地图数据，可用于调试。
       </p>
       <div class="dp-highlighter bg_html">
        <ol class="dp-xml" start="1">
         <li class="alt">
          //from echarts example
         </li>
         <li class="">
          <span class="tag">
           &lt;
          </span>
          <span class="tag-name">
           body
          </span>
          <span class="tag">
           &gt;
          </span>
         </li>
         <li class="alt">
          <span class="tag">
           &lt;
          </span>
          <span class="tag-name">
           div
          </span>
          <span class="attribute">
           id
          </span>
          =
          <span class="attribute-value">
           “main”
          </span>
          <span class="attribute">
           style
          </span>
          =
          <span class="attribute-value">
           “height:400px;”
          </span>
          <span class="tag">
           &gt;
          </span>
          <span class="tag">
           &lt;/
          </span>
          <span class="tag-name">
           div
          </span>
          <span class="tag">
           &gt;
          </span>
         </li>
         <li class="">
          …
         </li>
         <li class="alt">
          <span class="tag">
           &lt;
          </span>
          <span class="tag-name">
           script
          </span>
          <span class="attribute">
           src
          </span>
          =
          <span class="attribute-value">
           “example/www2/js/dist/echarts-all.js”
          </span>
          <span class="tag">
           &gt;
          </span>
          <span class="tag">
           &lt;/
          </span>
          <span class="tag-name">
           script
          </span>
          <span class="tag">
           &gt;
          </span>
         </li>
         <li class="">
          <span class="tag">
           &lt;
          </span>
          <span class="tag-name">
           script
          </span>
          <span class="tag">
           &gt;
          </span>
         </li>
         <li class="alt">
          var
          <span class="attribute">
           myChart
          </span>
          =
          <span class="attribute-value">
           echarts
          </span>
          .init(document.getElementById(‘main’));
         </li>
         <li class="">
          var
          <span class="attribute">
           option
          </span>
          = {
         </li>
         <li class="alt">
          …
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          myChart.setOption(option);
         </li>
         <li class="">
          <span class="tag">
           &lt;/
          </span>
          <span class="tag-name">
           script
          </span>
          <span class="tag">
           &gt;
          </span>
         </li>
         <li class="alt">
          <span class="tag">
           &lt;/
          </span>
          <span class="tag-name">
           body
          </span>
          <span class="tag">
           &gt;
          </span>
         </li>
        </ol>
       </div>
       <p>
        <strong>
         2.时间轴控件的使用。
        </strong>
       </p>
       <p>
        使用时间轴控件，我们需要从两个方面做准备，一个是设置时间轴，一个是设置每个时间点（数据和标题等）。
       </p>
       <p>
        <strong>
         设置时间轴
        </strong>
        。时间轴在ECharts里使用timeline设置，每个图标最多只能拥有一个时间轴，主要参数如下。
       </p>
       <table class="echarts ">
        <tbody>
         <tr>
          <th width="40">
           分组
          </th>
          <th>
           参数
          </th>
          <th>
           类型
          </th>
          <th>
           默认值
          </th>
          <th>
           含义
          </th>
         </tr>
         <tr>
          <td rowspan="5">
           参数设置
          </td>
          <td>
           data
          </td>
          <td>
           Array
          </td>
          <td>
           []
          </td>
          <td>
           时间轴列表，同时也是轴label内容
          </td>
         </tr>
         <tr>
          <td>
           show
          </td>
          <td>
           boolean
          </td>
          <td>
           true
          </td>
          <td>
           显示策略，可选为：true（显示） | false（隐藏）
          </td>
         </tr>
         <tr>
          <td>
           type
          </td>
          <td>
           string
          </td>
          <td>
           ‘time’
          </td>
          <td>
           模式是时间类型，时间轴间隔根据时间跨度计算，可选为：’number’
          </td>
         </tr>
         <tr>
          <td>
           notMerge
          </td>
          <td>
           boolean
          </td>
          <td>
           false
          </td>
          <td>
           时间轴上多个option切换时是否进行merge操作，同setOption第二个参数（详见实例方法）
          </td>
         </tr>
         <tr>
          <td>
           realtime
          </td>
          <td>
           boolean
          </td>
          <td>
           true
          </td>
          <td>
           拖拽或点击改变时间轴是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false
          </td>
         </tr>
         <tr>
          <td rowspan="4">
           播放控制
          </td>
          <td>
           autoPlay
          </td>
          <td>
           boolean
          </td>
          <td>
           false
          </td>
          <td>
           是否自动播放
          </td>
         </tr>
         <tr>
          <td>
           loop
          </td>
          <td>
           boolean
          </td>
          <td>
           true
          </td>
          <td>
           是否循环播放
          </td>
         </tr>
         <tr>
          <td>
           playInterval
          </td>
          <td>
           number
          </td>
          <td>
           2000
          </td>
          <td>
           播放时间间隔
          </td>
         </tr>
         <tr>
          <td>
           currentIndex
          </td>
          <td>
           number
          </td>
          <td>
           0
          </td>
          <td>
           当前索引位置，对应options数组，用于指定显示特定系列
          </td>
         </tr>
         <tr>
          <td rowspan="17">
           样式设置
          </td>
          <td>
           width
          </td>
          <td>
           number|string
          </td>
          <td>
           自适应
          </td>
          <td>
           时间轴宽度，默认为总宽度 – x – x2，指定width后将忽略x2。
          </td>
         </tr>
         <tr>
          <td>
           height
          </td>
          <td>
           number|string
          </td>
          <td>
           50
          </td>
          <td>
           时间轴高度
          </td>
         </tr>
         <tr>
          <td>
           x
          </td>
          <td>
           number|string
          </td>
          <td>
           80
          </td>
          <td>
           时间轴左上角横坐标
          </td>
         </tr>
         <tr>
          <td>
           y
          </td>
          <td>
           number|string
          </td>
          <td>
           null
          </td>
          <td>
           时间轴左上角纵坐标，默认无，随y2定位，
          </td>
         </tr>
         <tr>
          <td>
           x2
          </td>
          <td>
           number|string
          </td>
          <td>
           80
          </td>
          <td>
           时间轴右下角横坐标
          </td>
         </tr>
         <tr>
          <td>
           y2
          </td>
          <td>
           number|string
          </td>
          <td>
           0
          </td>
          <td>
           时间轴右下角纵坐标
          </td>
         </tr>
         <tr>
          <td>
           padding
          </td>
          <td>
           number|Array
          </td>
          <td>
           5
          </td>
          <td>
           内边距，单位px,接受数组分别设定上右下左边距，同css。
          </td>
         </tr>
         <tr>
          <td>
           backgroundColor
          </td>
          <td>
           color
          </td>
          <td>
           ‘rgba(0,0,0,0)’
          </td>
          <td>
           背景颜色，默认透明。
          </td>
         </tr>
         <tr>
          <td>
           borderWidth
          </td>
          <td>
           number
          </td>
          <td>
           0
          </td>
          <td>
           边框线宽
          </td>
         </tr>
         <tr>
          <td>
           borderColor
          </td>
          <td>
           color
          </td>
          <td>
           ‘#ccc’
          </td>
          <td>
           边框颜色
          </td>
         </tr>
         <tr>
          <td>
           controlPosition
          </td>
          <td>
           string
          </td>
          <td>
           ‘left’
          </td>
          <td>
           播放控制器位置，可选为：’left’ | ‘right’ | ‘none’
          </td>
         </tr>
         <tr>
          <td>
           lineStyle
          </td>
          <td>
           Object
          </td>
          <td>
           参见代码
          </td>
          <td>
           时间轴轴线样式，lineStyle控制线条样式，（详见
           <a href="http://echarts.baidu.com/doc/doc.html#LineStyle" target="_blank" title="">
            lineStyle
           </a>
           ）
          </td>
         </tr>
         <tr>
          <td>
           label
          </td>
          <td>
           Object
          </td>
          <td>
           参见代码
          </td>
          <td>
           时间轴标签文本
          </td>
         </tr>
         <tr>
          <td>
           checkpointStyle
          </td>
          <td>
           Object
          </td>
          <td>
           参见代码
          </td>
          <td>
           时间轴当前点
          </td>
         </tr>
         <tr>
          <td>
           controlStyle
          </td>
          <td>
           Object
          </td>
          <td>
           参见代码
          </td>
          <td>
           时间轴控制器样式，可指定正常和高亮颜色
          </td>
         </tr>
         <tr>
          <td>
           symbol
          </td>
          <td>
           string
          </td>
          <td>
           ’emptyDiamond’
          </td>
          <td>
           轴点symbol，同serie.symbol
          </td>
         </tr>
         <tr>
          <td>
           symbolSize
          </td>
          <td>
           number
          </td>
          <td>
           4
          </td>
          <td>
           轴点symbol，同serie.symbolSize
          </td>
         </tr>
        </tbody>
       </table>
       <p>
        注意：
       </p>
       <p>
        a++. width、height、x、x2、y、y2等设置大小位置的参数，类型为number|string，可以接受数值型，单位为px，也可接受百分比（字符串），如50%表示居中显示。
       </p>
       <p>
        b++. lineStyle的默认值为{color: ‘#666’, width: 1, type: ‘dashed’}
       </p>
       <p>
        c++. label的默认值为代码所示。参数解释如下
       </p>
       <p>
        show : 是否显示 ；
       </p>
       <p>
        interval : 挑选间隔，默认为’auto’，可选为：’auto’（自动隐藏显示不下的） | 0（全部显示） | {number} ；
       </p>
       <p>
        rotate : 旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90 ；
       </p>
       <p>
        formatter ： 间隔名称格式器：{string}（Template） | {Function} ；
       </p>
       <p>
        textStyle : 文字样式（详见textStyle）
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          {
         </li>
         <li class="">
          show:
          <span class="keyword">
           true
          </span>
          ,
         </li>
         <li class="alt">
          interval:
          <span class="string">
           ‘auto’
          </span>
          ,
         </li>
         <li class="">
          rotate: 0,
         </li>
         <li class="alt">
          formatter:
          <span class="keyword">
           null
          </span>
          ,
         </li>
         <li class="">
          textStyle: {
         </li>
         <li class="alt">
          color:
          <span class="string">
           ‘#333’
          </span>
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          }
         </li>
        </ol>
       </div>
       <p>
        d++. checkpointStyle的参数解释如下，默认值为代码所示。
       </p>
       <p>
        symbol : 当前点symbol，默认随轴上的symbol
       </p>
       <p>
        symbolSize : 当前点symbol大小，默认随轴上symbol大小
       </p>
       <p>
        color : 当前点symbol颜色，默认为随当前点颜色，可指定具体颜色，如无则为’#1e90ff’
       </p>
       <p>
        borderColor ： 当前点symbol边线颜色
       </p>
       <p>
        borderWidth ： 当前点symbol边线宽度
       </p>
       <p>
        label同c
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          {
         </li>
         <li class="">
          symbol :
          <span class="string">
           ‘auto’
          </span>
          ,
         </li>
         <li class="alt">
          symbolSize :
          <span class="string">
           ‘auto’
          </span>
          ,
         </li>
         <li class="">
          color :
          <span class="string">
           ‘auto’
          </span>
          ,
         </li>
         <li class="alt">
          borderColor :
          <span class="string">
           ‘auto’
          </span>
          ,
         </li>
         <li class="">
          borderWidth :
          <span class="string">
           ‘auto’
          </span>
          ,
         </li>
         <li class="alt">
          label: {
         </li>
         <li class="">
          show:
          <span class="keyword">
           false
          </span>
          ,
         </li>
         <li class="alt">
          textStyle: {
         </li>
         <li class="">
          color:
          <span class="string">
           ‘auto’
          </span>
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          }
         </li>
        </ol>
       </div>
       <p>
        e++. controlStyle的默认值为
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          {
         </li>
         <li class="">
          normal : { color :
          <span class="string">
           ‘#333’
          </span>
          },
         </li>
         <li class="alt">
          emphasis : { color :
          <span class="string">
           ‘#1e90ff’
          </span>
          }
         </li>
         <li class="">
          }
         </li>
        </ol>
       </div>
       <p>
        样式参数在时间轴上的作用效果见下图详视。
       </p>
       <p>
        <img src="http://dataunion.org/wp-content/uploads/2015/01/timeline.png"/>
       </p>
       <p>
        <strong>
         设置每个时间点
        </strong>
        。第二步是设置每个具体的时间点，每个时间点就是一个图标，包括标题、图例、坐标轴、数据等，当然一般坐标轴、图例等不变，仅仅改变标题和数据。
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          <span class="keyword">
           var
          </span>
          option = {
         </li>
         <li class="">
          <span class="comment">
           //时间轴设置
          </span>
         </li>
         <li class="alt">
          timeline : {},
         </li>
         <li class="">
          <span class="comment">
           //时间点设置
          </span>
         </li>
         <li class="alt">
          options : [
         </li>
         <li class="">
          <span class="comment">
           //第一个时间点
          </span>
         </li>
         <li class="alt">
          {},
         </li>
         <li class="">
          <span class="comment">
           //第二个时间点
          </span>
         </li>
         <li class="alt">
          {},
         </li>
         <li class="">
          <span class="comment">
           //…
          </span>
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          }
         </li>
        </ol>
       </div>
       <h2>
        <p name="t3">
        </p>
        实现过程
       </h2>
       <p>
        然后我们来解读实现过程。
       </p>
       <p>
        时间轴里面我们设置了时间戳，仅仅显示年份；为保证美观，调整了时间轴的位置；同时设定了时间轴播放设置。
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          <span class="keyword">
           var
          </span>
          option = {
         </li>
         <li class="">
          <span class="comment">
           //时间轴设置
          </span>
         </li>
         <li class="alt">
          timeline : {
         </li>
         <li class="">
          <span class="comment">
           //时间轴时间列表
          </span>
         </li>
         <li class="alt">
          data:[
         </li>
         <li class="">
          <span class="string">
           ‘2002-01-01’
          </span>
          ,
          <span class="string">
           ‘2003-01-01’
          </span>
          ,
          <span class="string">
           ‘2004-01-01’
          </span>
          ,
          <span class="string">
           ‘2005-01-01’
          </span>
          ,
          <span class="string">
           ‘2006-01-01’
          </span>
         </li>
         <li class="alt">
          ],
         </li>
         <li class="">
          <span class="comment">
           //自定义处理，只显示年份
          </span>
         </li>
         <li class="alt">
          label:{
         </li>
         <li class="">
          formatter :
          <span class="keyword">
           function
          </span>
          (s) {
         </li>
         <li class="alt">
          <span class="keyword">
           return
          </span>
          s.slice(0, 4);
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //时间轴的位置设定
          </span>
         </li>
         <li class="alt">
          height:80,
         </li>
         <li class="">
          x:50,
         </li>
         <li class="alt">
          padding:[40,10,10,10],
         </li>
         <li class="">
          <span class="comment">
           //时间轴播放控制
          </span>
         </li>
         <li class="alt">
          autoPlay :
          <span class="keyword">
           true
          </span>
          ,
         </li>
         <li class="">
          playInterval : 2000
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //时间点设置
          </span>
         </li>
         <li class="alt">
          options : [
         </li>
         <li class="">
          <span class="comment">
           //第一个时间点
          </span>
         </li>
         <li class="alt">
          {},
         </li>
         <li class="">
          <span class="comment">
           //第二个时间点
          </span>
         </li>
         <li class="alt">
          {},
         </li>
         <li class="">
          <span class="comment">
           //…
          </span>
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          }
         </li>
        </ol>
       </div>
       <p>
        然后设置时间点，先看2012年的数据设置，我们设置标题、提示、图例、坐标轴、绘制数据线。
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          <span class="keyword">
           var
          </span>
          option = {
         </li>
         <li class="">
          <span class="comment">
           //时间轴设置
          </span>
         </li>
         <li class="alt">
          timeline : {
         </li>
         <li class="">
          <span class="comment">
           //时间轴时间列表
          </span>
         </li>
         <li class="alt">
          data:[
         </li>
         <li class="">
          <span class="string">
           ‘2002-01-01’
          </span>
          ,
          <span class="string">
           ‘2003-01-01’
          </span>
          ,
          <span class="string">
           ‘2004-01-01’
          </span>
          ,
          <span class="string">
           ‘2005-01-01’
          </span>
          ,
          <span class="string">
           ‘2006-01-01’
          </span>
         </li>
         <li class="alt">
          ],
         </li>
         <li class="">
          <span class="comment">
           //自定义处理，只显示年份
          </span>
         </li>
         <li class="alt">
          label:{
         </li>
         <li class="">
          formatter :
          <span class="keyword">
           function
          </span>
          (s) {
         </li>
         <li class="alt">
          <span class="keyword">
           return
          </span>
          s.slice(0, 4);
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //时间轴的位置设定
          </span>
         </li>
         <li class="alt">
          height:80,
         </li>
         <li class="">
          x:50,
         </li>
         <li class="alt">
          padding:[40,10,10,10],
         </li>
         <li class="">
          <span class="comment">
           //时间轴播放控制
          </span>
         </li>
         <li class="alt">
          autoPlay :
          <span class="keyword">
           true
          </span>
          ,
         </li>
         <li class="">
          playInterval : 2000
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //时间点设置
          </span>
         </li>
         <li class="alt">
          options : [
         </li>
         <li class="">
          <span class="comment">
           //第一个时间点
          </span>
         </li>
         <li class="alt">
          <span class="comment">
           //2002年数据表,新增内容
          </span>
         </li>
         <li class="">
          {
         </li>
         <li class="alt">
          title:{
         </li>
         <li class="">
          text:
          <span class="string">
           ‘2002年货物销量图’
          </span>
          ,
         </li>
         <li class="alt">
          subtext:
          <span class="string">
           ‘纯属捏造，如有雷同，人品爆发。’
          </span>
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //设置提示
          </span>
         </li>
         <li class="">
          tooltip: {
         </li>
         <li class="alt">
          show:
          <span class="keyword">
           true
          </span>
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //设置图例
          </span>
         </li>
         <li class="">
          legend: {
         </li>
         <li class="alt">
          data:[
          <span class="string">
           ‘销量’
          </span>
          ]
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //设置坐标轴
          </span>
         </li>
         <li class="">
          xAxis : [
         </li>
         <li class="alt">
          {
         </li>
         <li class="">
          type :
          <span class="string">
           ‘category’
          </span>
          ,
         </li>
         <li class="alt">
          data : [
          <span class="string">
           “衬衫”
          </span>
          ,
          <span class="string">
           “羊毛衫”
          </span>
          ,
          <span class="string">
           “雪纺衫”
          </span>
          ,
          <span class="string">
           “裤子”
          </span>
          ,
          <span class="string">
           “高跟鞋”
          </span>
          ,
          <span class="string">
           “袜子”
          </span>
          ,
          <span class="string">
           “帽子”
          </span>
          ,
          <span class="string">
           “围巾”
          </span>
          ],
         </li>
         <li class="">
          axisLabel:{
         </li>
         <li class="alt">
          margin:-20,
         </li>
         <li class="">
          textStyle:{
         </li>
         <li class="alt">
          color:
          <span class="string">
           ‘#999’
          </span>
          ,
         </li>
         <li class="">
          fontWeight:
          <span class="string">
           ‘bold’
          </span>
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          ],
         </li>
         <li class="alt">
          yAxis : [
         </li>
         <li class="">
          {
         </li>
         <li class="alt">
          type :
          <span class="string">
           ‘value’
          </span>
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          ],
         </li>
         <li class="">
          series : [
         </li>
         <li class="alt">
          {
         </li>
         <li class="">
          type:
          <span class="string">
           ‘line’
          </span>
          ,
         </li>
         <li class="alt">
          data:[5, 20, 38, 10, 24, 20,24,32],
         </li>
         <li class="">
          <span class="comment">
           //绘制平均线
          </span>
         </li>
         <li class="alt">
          markLine : {
         </li>
         <li class="">
          data : [
         </li>
         <li class="alt">
          {type :
          <span class="string">
           ‘average’
          </span>
          , name:
          <span class="string">
           ‘平均值’
          </span>
          }
         </li>
         <li class="">
          ]
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //绘制最高最低点
          </span>
         </li>
         <li class="alt">
          markPoint : {
         </li>
         <li class="">
          data : [
         </li>
         <li class="alt">
          {type :
          <span class="string">
           ‘max’
          </span>
          , name:
          <span class="string">
           ‘最大值’
          </span>
          },
         </li>
         <li class="">
          {type :
          <span class="string">
           ‘min’
          </span>
          , name:
          <span class="string">
           ‘最小值’
          </span>
          }
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          ]
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //第二个时间点
          </span>
         </li>
         <li class="alt">
          {},
         </li>
         <li class="">
          <span class="comment">
           //…
          </span>
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          }
         </li>
        </ol>
       </div>
       <p>
        其他时间点只需要设置于2002年不同的地方即可，本例我们仅仅设置标题和数据表。
       </p>
       <div class="dp-highlighter bg_javascript">
        <ol class="dp-c" start="1">
         <li class="alt">
          <span class="keyword">
           var
          </span>
          option = {
         </li>
         <li class="">
          <span class="comment">
           //时间轴设置
          </span>
         </li>
         <li class="alt">
          timeline : {
         </li>
         <li class="">
          <span class="comment">
           //时间轴时间列表
          </span>
         </li>
         <li class="alt">
          data:[
         </li>
         <li class="">
          <span class="string">
           ‘2002-01-01’
          </span>
          ,
          <span class="string">
           ‘2003-01-01’
          </span>
          ,
          <span class="string">
           ‘2004-01-01’
          </span>
          ,
          <span class="string">
           ‘2005-01-01’
          </span>
          ,
          <span class="string">
           ‘2006-01-01’
          </span>
         </li>
         <li class="alt">
          ],
         </li>
         <li class="">
          <span class="comment">
           //自定义处理，只显示年份
          </span>
         </li>
         <li class="alt">
          label:{
         </li>
         <li class="">
          formatter :
          <span class="keyword">
           function
          </span>
          (s) {
         </li>
         <li class="alt">
          <span class="keyword">
           return
          </span>
          s.slice(0, 4);
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //时间轴的位置设定
          </span>
         </li>
         <li class="alt">
          height:80,
         </li>
         <li class="">
          x:50,
         </li>
         <li class="alt">
          padding:[40,10,10,10],
         </li>
         <li class="">
          <span class="comment">
           //时间轴播放控制
          </span>
         </li>
         <li class="alt">
          autoPlay :
          <span class="keyword">
           true
          </span>
          ,
         </li>
         <li class="">
          playInterval : 2000
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //时间点设置
          </span>
         </li>
         <li class="alt">
          options : [
         </li>
         <li class="">
          <span class="comment">
           //第一个时间点
          </span>
         </li>
         <li class="alt">
          <span class="comment">
           //2002年数据表
          </span>
         </li>
         <li class="">
          {
         </li>
         <li class="alt">
          title:{
         </li>
         <li class="">
          text:
          <span class="string">
           ‘2002年货物销量图’
          </span>
          ,
         </li>
         <li class="alt">
          subtext:
          <span class="string">
           ‘纯属捏造，如有雷同，人品爆发。’
          </span>
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //设置提示
          </span>
         </li>
         <li class="">
          tooltip: {
         </li>
         <li class="alt">
          show:
          <span class="keyword">
           true
          </span>
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //设置图例
          </span>
         </li>
         <li class="">
          legend: {
         </li>
         <li class="alt">
          data:[
          <span class="string">
           ‘销量’
          </span>
          ]
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //设置坐标轴
          </span>
         </li>
         <li class="">
          xAxis : [
         </li>
         <li class="alt">
          {
         </li>
         <li class="">
          type :
          <span class="string">
           ‘category’
          </span>
          ,
         </li>
         <li class="alt">
          data : [
          <span class="string">
           “衬衫”
          </span>
          ,
          <span class="string">
           “羊毛衫”
          </span>
          ,
          <span class="string">
           “雪纺衫”
          </span>
          ,
          <span class="string">
           “裤子”
          </span>
          ,
          <span class="string">
           “高跟鞋”
          </span>
          ,
          <span class="string">
           “袜子”
          </span>
          ,
          <span class="string">
           “帽子”
          </span>
          ,
          <span class="string">
           “围巾”
          </span>
          ],
         </li>
         <li class="">
          axisLabel:{
         </li>
         <li class="alt">
          margin:-20,
         </li>
         <li class="">
          textStyle:{
         </li>
         <li class="alt">
          color:
          <span class="string">
           ‘#999’
          </span>
          ,
         </li>
         <li class="">
          fontWeight:
          <span class="string">
           ‘bold’
          </span>
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          ],
         </li>
         <li class="alt">
          yAxis : [
         </li>
         <li class="">
          {
         </li>
         <li class="alt">
          type :
          <span class="string">
           ‘value’
          </span>
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          ],
         </li>
         <li class="">
          series : [
         </li>
         <li class="alt">
          {
         </li>
         <li class="">
          type:
          <span class="string">
           ‘line’
          </span>
          ,
         </li>
         <li class="alt">
          data:[5, 20, 38, 10, 24, 20,24,32],
         </li>
         <li class="">
          <span class="comment">
           //绘制平均线
          </span>
         </li>
         <li class="alt">
          markLine : {
         </li>
         <li class="">
          data : [
         </li>
         <li class="alt">
          {type :
          <span class="string">
           ‘average’
          </span>
          , name:
          <span class="string">
           ‘平均值’
          </span>
          }
         </li>
         <li class="">
          ]
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //绘制最高最低点
          </span>
         </li>
         <li class="alt">
          markPoint : {
         </li>
         <li class="">
          data : [
         </li>
         <li class="alt">
          {type :
          <span class="string">
           ‘max’
          </span>
          , name:
          <span class="string">
           ‘最大值’
          </span>
          },
         </li>
         <li class="">
          {type :
          <span class="string">
           ‘min’
          </span>
          , name:
          <span class="string">
           ‘最小值’
          </span>
          }
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          ]
         </li>
         <li class="alt">
          },
         </li>
         <li class="">
          <span class="comment">
           //第二个时间点
          </span>
         </li>
         <li class="alt">
          <span class="comment">
           //2003年数据表，新增内容
          </span>
         </li>
         <li class="">
          {
         </li>
         <li class="alt">
          title:{
         </li>
         <li class="">
          text:
          <span class="string">
           ‘2003年货物销量图’
          </span>
          ,
         </li>
         <li class="alt">
          subtext:
          <span class="string">
           ‘纯属捏造，如有雷同，人品爆发。’
          </span>
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          series : [
         </li>
         <li class="">
          {
         </li>
         <li class="alt">
          type:
          <span class="string">
           ‘line’
          </span>
          ,
         </li>
         <li class="">
          data:[10, 20, 36, 18, 26, 16,20,34],
         </li>
         <li class="alt">
          <span class="comment">
           //绘制平均线
          </span>
         </li>
         <li class="">
          markLine : {
         </li>
         <li class="alt">
          data : [
         </li>
         <li class="">
          {type :
          <span class="string">
           ‘average’
          </span>
          , name:
          <span class="string">
           ‘平均值’
          </span>
          }
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //绘制最高最低点
          </span>
         </li>
         <li class="">
          markPoint : {
         </li>
         <li class="alt">
          data : [
         </li>
         <li class="">
          {type :
          <span class="string">
           ‘max’
          </span>
          , name:
          <span class="string">
           ‘最大值’
          </span>
          },
         </li>
         <li class="alt">
          {type :
          <span class="string">
           ‘min’
          </span>
          , name:
          <span class="string">
           ‘最小值’
          </span>
          }
         </li>
         <li class="">
          ]
         </li>
         <li class="alt">
          }
         </li>
         <li class="">
          }
         </li>
         <li class="alt">
          ]
         </li>
         <li class="">
          },
         </li>
         <li class="alt">
          <span class="comment">
           //第三个时间点
          </span>
         </li>
         <li class="">
          {},
         </li>
         <li class="alt">
          <span class="comment">
           //…
          </span>
         </li>
         <li class="">
          ]
         </li>
         <li class="alt">
          }
         </li>
        </ol>
       </div>
       <p>
        剩下的就不多说了，大家自行补足。
       </p>
       <p>
        感谢您的阅读，欢迎提出您的宝贵意见。
       </p>
       <p>
       </p>
       <p>
        文章出处：
        <a href="http://blog.csdn.net/whqet/article/details/42711609">
         http://blog.csdn.net/whqet/article/details/42711609
        </a>
       </p>
      </div>
      <div>
       <strong>
        注：转载文章均来自于公开网络，仅供学习使用，不会用于任何商业用途，如果侵犯到原作者的权益，请您与我们联系删除或者授权事宜，联系邮箱：contact@dataunion.org。转载数盟网站文章请注明原文章作者，否则产生的任何版权纠纷与数盟无关。
       </strong>
      </div>
      <!--content_text-->
      <div class="fenxian">
       <!-- JiaThis Button BEGIN -->
       <div class="jiathis_style_32x32">
        <p class="jiathis_button_weixin">
        </p>
        <p class="jiathis_button_tsina">
        </p>
        <p class="jiathis_button_qzone">
        </p>
        <p class="jiathis_button_cqq">
        </p>
        <p class="jiathis_button_tumblr">
        </p>
        <a class="jiathis jiathis_txt jtico jtico_jiathis" href="http://www.jiathis.com/share" target="_blank">
        </a>
        <p class="jiathis_counter_style">
        </p>
       </div>
       <!-- JiaThis Button END -->
      </div>
     </article>
     <!--content-->
     <!--相关文章-->
     <div class="xianguan">
      <div class="xianguantitle">
       相关文章！
      </div>
      <ul class="pic">
       <li>
        <a href="http://dataunion.org/13409.html">
         <img src="http://dataunion.org/wp-content/uploads/2015/03/t0184896353c39d1048_副本.png"/>
        </a>
        <a class="link" href="http://dataunion.org/13409.html" rel="bookmark" title="ECharts-Java 类库 2.2.0.1 版本发布">
         ECharts-Java 类库 2.2.0.1 版本发布
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/8944.html">
         <img src="http://dataunion.org/wp-content/uploads/2015/01/QQ截图20150121190956-300x183.png"/>
        </a>
        <a class="link" href="http://dataunion.org/8944.html" rel="bookmark" title="ECharts案例教程（上）">
         ECharts案例教程（上）
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/5281.html">
         <img src="http://dataunion.org/wp-content/uploads/2014/12/QQ截图20141225175442_副本.png"/>
        </a>
        <a class="link" href="http://dataunion.org/5281.html" rel="bookmark" title="ECharts19款图表系统特性总览">
         ECharts19款图表系统特性总览
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/5100.html">
         <img src="http://dataunion.org/wp-content/uploads/2014/12/74b3d9877eaa196b847c992723b27cfb_副本.png"/>
        </a>
        <a class="link" href="http://dataunion.org/5100.html" rel="bookmark" title="零基础学ECharts，数据图表使用介绍 超详细">
         零基础学ECharts，数据图表使用介绍 超详细
        </a>
       </li>
      </ul>
     </div>
     <!--相关文章-->
     <div class="comment" id="comments">
      <!-- You can start editing here. -->
      <!-- If comments are open, but there are no comments. -->
      <div class="title">
       期待你一针见血的评论，Come on！
      </div>
      <div id="respond">
       <p>
        不用想啦，马上
        <a href="http://dataunion.org/wp-login.php?redirect_to=http%3A%2F%2Fdataunion.org%2F8952.html">
         "登录"
        </a>
        发表自已的想法.
       </p>
      </div>
     </div>
     <!-- .nav-single -->
    </div>
    <!--Container End-->
    <aside id="sitebar">
     <div class="sitebar_list2">
      <div class="wptag">
       <span class="tagtitle">
        热门标签+
       </span>
       <div class="tagg">
        <ul class="menu" id="menu-%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5">
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1605" id="menu-item-1605">
          <a href="http://taidizh.com/">
           泰迪智慧
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20884" id="menu-item-20884">
          <a href="http://www.transwarp.cn/">
           星环科技
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3538" id="menu-item-3538">
          <a href="http://datall.org/">
           珈和遥感
          </a>
         </li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20888" id="menu-item-20888">
          <a href="http://www.chinahadoop.cn/">
           小象学院
          </a>
         </li>
        </ul>
       </div>
      </div>
     </div>
     <div class="sitebar_list">
      <div class="textwidget">
       <div align="center">
        <a href="http://study.163.com/course/courseMain.htm?courseId=991022" target="_blank">
         <img src="http://dataunion.org/wp-content/uploads/2016/03/dv.jpg"/>
        </a>
       </div>
      </div>
     </div>
     <div class="sitebar_list">
      <h4 class="sitebar_title">
       文章分类
      </h4>
      <div class="tagcloud">
       <a class="tag-link-44" href="http://dataunion.org/category/industry/demo" style="font-size: 10.204724409449pt;" title="4个话题">
        Demo展示
       </a>
       <a class="tag-link-31" href="http://dataunion.org/category/experts" style="font-size: 15.826771653543pt;" title="52个话题">
        专家团队
       </a>
       <a class="tag-link-870" href="http://dataunion.org/category/tech/ai" style="font-size: 19.795275590551pt;" title="273个话题">
        人工智能
       </a>
       <a class="tag-link-488" href="http://dataunion.org/category/%e5%8a%a0%e5%85%a5%e6%95%b0%e7%9b%9f" style="font-size: 8pt;" title="1个话题">
        加入数盟
       </a>
       <a class="tag-link-869" href="http://dataunion.org/category/tech/viz" style="font-size: 17.204724409449pt;" title="93个话题">
        可视化
       </a>
       <a class="tag-link-30" href="http://dataunion.org/category/partners" style="font-size: 10.645669291339pt;" title="5个话题">
        合作伙伴
       </a>
       <a class="tag-link-889" href="http://dataunion.org/category/parterc" style="font-size: 11.582677165354pt;" title="8个话题">
        合作会议
       </a>
       <a class="tag-link-104" href="http://dataunion.org/category/books" style="font-size: 12.96062992126pt;" title="15个话题">
        图书
       </a>
       <a class="tag-link-220" href="http://dataunion.org/category/tech/base" style="font-size: 19.850393700787pt;" title="281个话题">
        基础架构
       </a>
       <a class="tag-link-219" href="http://dataunion.org/category/tech/analysis" style="font-size: 19.409448818898pt;" title="232个话题">
        数据分析
       </a>
       <a class="tag-link-887" href="http://dataunion.org/category/tech/dm" style="font-size: 13.291338582677pt;" title="17个话题">
        数据挖掘
       </a>
       <a class="tag-link-34" href="http://dataunion.org/category/tech" style="font-size: 20.732283464567pt;" title="404个话题">
        文章
       </a>
       <a class="tag-link-1" href="http://dataunion.org/category/uncategorized" style="font-size: 22pt;" title="693个话题">
        未分类
       </a>
       <a class="tag-link-4" href="http://dataunion.org/category/events" style="font-size: 14.503937007874pt;" title="29个话题">
        活动
       </a>
       <a class="tag-link-890" href="http://dataunion.org/category/tech/%e6%b7%b1%e5%ba%a6%e5%ad%a6%e4%b9%a0" style="font-size: 10.204724409449pt;" title="4个话题">
        深度学习
       </a>
       <a class="tag-link-221" href="http://dataunion.org/category/tech/devl" style="font-size: 18.968503937008pt;" title="193个话题">
        编程语言
       </a>
       <a class="tag-link-888" href="http://dataunion.org/category/career" style="font-size: 15.661417322835pt;" title="48个话题">
        职业规划
       </a>
       <a class="tag-link-5" href="http://dataunion.org/category/jobs" style="font-size: 14.11811023622pt;" title="25个话题">
        职位
       </a>
       <a class="tag-link-871" href="http://dataunion.org/category/industry" style="font-size: 15.716535433071pt;" title="49个话题">
        行业
       </a>
       <a class="tag-link-613" href="http://dataunion.org/category/industry/case" style="font-size: 16.984251968504pt;" title="84个话题">
        行业应用
       </a>
       <a class="tag-link-885" href="http://dataunion.org/category/industry/news" style="font-size: 17.425196850394pt;" title="102个话题">
        行业资讯
       </a>
       <a class="tag-link-10" href="http://dataunion.org/category/training" style="font-size: 14.228346456693pt;" title="26个话题">
        课程
       </a>
       <a class="tag-link-16" href="http://dataunion.org/category/sources" style="font-size: 15.661417322835pt;" title="48个话题">
        资源
       </a>
      </div>
     </div>
     <div class="sitebar_list">
      <h4 class="sitebar_title">
       功能
      </h4>
      <ul>
       <li>
        <a href="http://dataunion.org/wp-login.php?action=register">
         注册
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/wp-login.php">
         登录
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/feed">
         文章
         <abbr title="Really Simple Syndication">
          RSS
         </abbr>
        </a>
       </li>
       <li>
        <a href="http://dataunion.org/comments/feed">
         评论
         <abbr title="Really Simple Syndication">
          RSS
         </abbr>
        </a>
       </li>
       <li>
        <a href="https://cn.wordpress.org/" title="基于WordPress，一个优美、先进的个人信息发布平台。">
         WordPress.org
        </a>
       </li>
      </ul>
     </div>
    </aside>
    <div class="clear">
    </div>
   </div>
   <!--main-->
   ﻿
   <footer id="dibu">
    <div class="about">
     <div class="right">
      <ul class="menu" id="menu-%e5%ba%95%e9%83%a8%e8%8f%9c%e5%8d%95">
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-18024" id="menu-item-18024">
        <a href="http://dataunion.org/category/partners">
         合作伙伴
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20881" id="menu-item-20881">
        <a href="http://dataunion.org/contribute">
         文章投稿
        </a>
       </li>
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-20872" id="menu-item-20872">
        <a href="http://dataunion.org/category/%e5%8a%a0%e5%85%a5%e6%95%b0%e7%9b%9f">
         加入数盟
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22441" id="menu-item-22441">
        <a href="http://dataunion.org/f-links">
         友情链接
        </a>
       </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20874" id="menu-item-20874">
        <a href="http://dataunion.org/aboutus">
         关于数盟
        </a>
       </li>
      </ul>
      <p class="banquan">
       数盟社区        ，
        做最棒的数据科学社区
      </p>
     </div>
     <div class="left">
      <ul class="bottomlist">
       <li>
        <a href="http://weibo.com/DataScientistUnion  " target="_blank" 　title="">
         <img src="http://dataunion.org/wp-content/themes/yzipi/images/weibo.png"/>
        </a>
       </li>
       <li>
        <a class="cd-popup-trigger" href="http://dataunion.org/8952.html#0">
         <img src="http://dataunion.org/wp-content/themes/yzipi/images/weixin.png"/>
        </a>
       </li>
      </ul>
      <div class="cd-popup">
       <div class="cd-popup-container">
        <h1>
         扫描二维码,加微信公众号
        </h1>
        <img src="http://dataunion.org/wp-content/themes/yzipi/images/2014-12-06-1515289049.png"/>
        <a class="cd-popup-close" href="http://dataunion.org/8952.html">
        </a>
       </div>
       <!-- cd-popup-container -->
      </div>
      <!-- cd-popup -->
     </div>
    </div>
    <!--about-->
    <div class="bottom">
     <a href="http://dataunion.org/">
      数盟社区
     </a>
     <a href="http://www.miitbeian.gov.cn/" rel="external nofollow" target="_blank">
      京ICP备14026740号
     </a>
     联系我们：
     <a href="mailto:contact@dataunion.org" target="_blank">
      contact@dataunion.org
     </a>
     <div class="tongji">
     </div>
     <!--bottom-->
     <div class="scroll" id="scroll" style="display:none;">
      ︿
     </div>
    </div>
   </footer>
   <!--dibu-->
  </div>
 </body>
</html>